<template>
	<el-row :gutter="40" class="panel-group">
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
				<div class="card-panel-icon-wrapper icon-people">
					<svg-icon icon-class="国际酒店" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						产生单位
					</div>
					<count-to :start-val="0" :end-val="showdata.totalNum" :duration="2600" class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('messages')">
				<div class="card-panel-icon-wrapper icon-message">
					<svg-icon icon-class="驾驶员" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						车辆数/驾驶员
					</div>
					<count-to :start-val="0" :end-val="showdata.chargingNum" :duration="3000" class="card-panel-num" />/
					<count-to :start-val="0" :end-val="showdata.chargingNum" :duration="3000" class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('purchases')">
				<div class="card-panel-icon-wrapper icon-message">
					<svg-icon icon-class="处理单位" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						收运单位数
					</div>
					<count-to :start-val="0" :end-val="showdata.alarmNum" :duration="3200" class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('shoppings')">
				<div class="card-panel-icon-wrapper icon-shopping">
					<svg-icon icon-class="垃圾桶" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						专用桶
					</div>
					<count-to :start-val="0" :end-val="showdata.batStationNum" :duration="3600"
						class="card-panel-num" />
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import CountTo from 'vue-count-to'
	import {
		selectBatStatus
	} from './req.js'
	export default {
		data() {
			return {
				showdata: {
					"chargingNum": 10,
					"totalNum": 20,
					"alarmNum": 30,
					"batStationNum": 40
				}
			}
		},
		components: {
			CountTo
		},
		created() {
			//this.seleb();
		},
		methods: {
			handleSetLineChartData(type) {
				this.$emit('handleSetLineChartData', type)
			},
			async seleb() {
				let parm = {
					batModelId: '',
					batNo: '',
					batTypeId: '',
					operationDepartment: ''
				}
				let result = await selectBatStatus(parm);
				// this.showdata = result;
				this.showdata = {
					"chargingNum": result.chargingErrorNum + result.chargingNormalNum,
					"totalNum": result.totalNum,
					"alarmNum": result.chargingErrorNum + result.disChargingErrorNum + result.offLineErrorNum,
					"batStationNum": result.disChargingNormalNum
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.panel-group {
		margin-top: 18px;

		.card-panel-col {
			margin-bottom: 32px;
		}

		.card-panel {
			height: 108px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			overflow: hidden;
			color: #666;
			background: #fff;
			box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
			border-color: rgba(0, 0, 0, .05);

			// &:hover {
			// 	.card-panel-icon-wrapper {
			// 		color: #fff;
			// 	}

			// 	.icon-people {
			// 		background: #40c9c6;
			// 	}

			// 	.icon-message {
			// 		background: #36a3f7;
			// 	}

			// 	.icon-money {
			// 		background: #f4516c;
			// 	}

			// 	.icon-shopping {
			// 		background: #34bfa3
			// 	}
			// }

			.icon-people {
				color: #40c9c6;
			}

			.icon-message {
				color: #36a3f7;
			}

			.icon-money {
				color: #f4516c;
			}

			.icon-shopping {
				color: #34bfa3
			}

			.card-panel-icon-wrapper {
				float: left;
				margin: 1px 0 0 1px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 75px;
			}

			.card-panel-description {
				font-weight: bold;
				position: absolute;
				right: 2rem;
				margin-top: 26px;

				.card-panel-text {
					line-height: 18px;
					color: rgba(0, 0, 0, 0.45);
					font-size: 16px;
					margin-bottom: 12px;
				}

				.card-panel-num {
					font-size: 20px;
				}
			}
		}
	}

	@media (max-width:550px) {
		.card-panel-description {
			display: none;
		}

		.card-panel-icon-wrapper {
			float: none !important;
			width: 100%;
			height: 100%;
			margin: 0 !important;

			.svg-icon {
				display: block;
				margin: 14px auto !important;
				float: none !important;
			}
		}
	}
	img.iconimg {
	    width: 65px;
	    height: 80px;
		margin-left: 1rem;
	    transform: rotate(90deg);
	    -ms-transform:rotate(90deg);  /* IE 9 */
	    -moz-transform:rotate(90deg);  /* Firefox */
	    -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
	    -o-transform:rotate(90deg);  /* Opera */
	}
</style>
